<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>石油大学地质博物馆虚拟仿真模拟系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../static/css/public.min.css" />
    <link rel="stylesheet" href="../static/css/styles.min.css" />
    <script src="../static/js/jquery-3.4.0.min.js"></script>
</head>
<body>
    <div class="main-wrap">
        <div class="system-title-wrap">
            <div class="pic-wrap logo-wrap">
                <img src="../static/image/img/img_logo.png" alt="logo" class="pic-img logo-img" />
            </div>
            <!-- <div class="system-name">地质博物馆虚拟仿真系统</div> -->
        </div>
        <div class="system-content">
            <div class="content-item-wrap content-left-wrap">
                <div class="content-position-wrap">
                    <span onclick="goToIndex()" class="position-item-title">首页</span>
                    <span class="position-item-icon"> > </span>
                    <span class="position-item-title current">馆内动态文章</span>
                </div>
                <div class="content-detail list-content" id="listbox">
                    <ul class="clearfix list-wrap article-list-wrap" id="list" name="list"></ul>
                    <p id="helpText" class="help-text">上拉加载更多</p>
                </div>
            </div>
            <div class="content-item-wrap content-right-wrap">
                <div class="search-wrap">
                    <!-- <a href="search_index.html" class="search-item-a"> -->
                        <input type="search" name="search-input" id="search-input" class="search-input" placeholder="请输入搜索关键词" />
                        <!-- <span class="search-placeholder">请输入搜索关键词</span> -->
                        <img src="../static/image/icon/icon_search.png" alt="" class="search-icon" id="search-icon" />
                    <!-- </a> -->
                </div>
                <div class="btn-item-wrap">
                    <div onclick="goToWin('about_index')" class="btn-item-a">
                        <img src="../static/image/icon/icon_nav1_1.png" alt="" class="btn-icon" />
                        <!-- <p class="btn-title">博物馆介绍</p> -->
                    </div>
                </div>
                <div class="btn-item-wrap">
                    <div onclick="goToWin('article_list')" class="btn-item-a">
                        <img src="../static/image/icon/icon_nav2_2.png" alt="" class="btn-icon" />
                        <!-- <p class="btn-title">馆内动态文章</p> -->
                    </div>
                </div>
                <div class="btn-item-wrap">
                    <div onclick="goToWin('specimen_index')" class="btn-item-a">
                        <img src="../static/image/icon/icon_nav3_1.png" alt="" class="btn-icon" />
                        <!-- <p class="btn-title">标本</p> -->
                    </div>
                </div>
                <div class="btn-item-wrap">
                    <div onclick="goToIndex()" class="btn-item-a">
                        <img src="../static/image/icon/icon_nav4_1.png" alt="" class="btn-icon" />
                        <!-- <p class="btn-title">返回首页</p> -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../static/js/shiyouda.js"></script>
<script type="text/javascript">
var page = 1;
apiready = function(){
  var domain = localStorage.getItem('domain');
  loadData(domain);
  var listbox = $api.byId('listbox');

  $api.addEvt(listbox, 'scroll', function(){
    var totalHeight = $('#listbox')[0].scrollHeight; // 可滑动的总高度
    var screenHeight = $('#listbox').height(); // 展示框的高度
    var scrollTop = $('#listbox').scrollTop(); // 距离顶部高度
    if(totalHeight - scrollTop - screenHeight < 5) {
      page ++;
      loadData(domain);
    }
  });
}
function loadData(domain) {
  var limit = 10;
  api.ajax({
      url: domain+'/api/article/articleList.html',
      method: 'post',
      data:{
        values:{
          page:page,
          limit:limit
        }
      }
  },function(ret, err){
    console.log(ret.msg);
    str = '';
    if(ret.data.list.length < limit) {
      // api.toast({msg:'没有数据了'});
      $('#helpText').html('没有数据了');
    }
    page++;
    for (var i = 0; i < ret.data.list.length; i++) {
      var o = ret.data.list[i];
      str += '<li class="list-item article-list-item">';
      str += '<div onclick="showDetail('+o.id+')" class="list-item-a">';
      str += '<div class="list-left-wrap article-info-wrap">';
      str += '<div class="article-title">'+o.title+'</div>';
      str += '<div class="article-time">'+o.create_time+'</div>';
      str += '<div class="article-desc">'+o.description+'</div>';
      str += '</div>';
      str += '<div class="list-right-wrap pic-wrap article-img-wrap">';
      str += '<img src="'+o.thumb+'" alt="" class="pic-img article-img" />';
      str += '</div>';
      str += '</div>';
      str += '</li>';
    }
    $('#list').append(str);
  });
}
</script>
</html>
